<template>
    <el-card>
        <!-- form 表单 -->
        <el-form :inline="true">
             <!-- 三级列表 -->
             <el-form-item label="一级分类">
                <el-select :disabled="show === 0 ? false: true" v-model="categoryStore.c1Id" @change="handler2">
                    <el-option :label="i.name" :value="i.id" v-for="i in categoryStore.c1Arr" :key="i.id"></el-option>
                </el-select>
             </el-form-item>
             <el-form-item label="二级分类">
                <el-select :disabled="show === 0 ? false: true" v-model="categoryStore.c2Id" @change="handler3">
                    <el-option :label="i.name" :value="i.id" v-for="i in categoryStore.c2Arr" :key="i.id"></el-option>
                </el-select>
             </el-form-item>
             <el-form-item label="三级分类">
                <el-select :disabled="show === 0 ? false: true" v-model="categoryStore.c3Id" >
                    <el-option :label="i.name" :value="i.id" v-for="i in categoryStore.c3Arr" :key="i.id"></el-option>
                </el-select>
             </el-form-item>
        </el-form>
    </el-card>
</template>

<script setup lang="ts">
import {onMounted ,ref} from 'vue'
import useCategoryStore from '../../stores/category'


// 挂载
onMounted(()=>{
    //挂载请求category1数据 
    getC1()
})

//获取小仓库
let categoryStore = useCategoryStore()

//请求category1
let getC1 = () =>{
    categoryStore.getC1()
}
// 请求请求category2
let handler2 = ()=>{
    categoryStore.getC2()
}
// 请求请求category3
let handler3 = ()=>{
    categoryStore.getC3()
}

defineProps(['show'])

</script>

<style scoped>

</style> 